<!--
 * @company : 版权所属 四川北星惯牌科技有限公司
 * @contact : 刘经理 19326416371
 -->
<template>
	<view class="writeOff-box flex-row-center">
		<view class="writeOff-log flex-center"  @click="toLog">
			<text class="text">核销记录</text>
		</view>
		<image src="/page_user/static/writeOff_bg.png" class="writeOff_bg" mode=""></image>
		<text class="name">扫描核销队员</text>
		<text class="description">请扫描队员的核销码进行核销</text>
		<!-- 扫描 -->
		<view class="scanCode-btn flex-center" @click="toscanCode">
			<up-icon name="scan" color="#0A534F" size="56rpx"></up-icon>
			<text class="text">开始核销</text>
		</view>
		<!-- 手输 -->
		<!-- <view class="loseHand-btn flex-center">
			<image src="/page_user/static/loseHand_icon.png" class="loseHand_icon" mode=""></image>
			<text class="text">手动输入</text>
		</view> -->
		<view class="loseHand-btn flex-row-center">
			<up-input placeholder="手动输入核销" color="#fff" @confirm="confirmWrite" :placeholderStyle="{'color':'#6DC5BC'}"
				inputAlign="center" border="none" v-model="writeCode">
				<template #prefix>
					<image src="/page_user/static/loseHand_icon.png" class="loseHand_icon" mode=""></image>
				</template>
			</up-input>
		</view>
		<view class="description-box w100 flex">
			<text class="description" v-if="writeTips">注：{{writeTips}}</text>
			<template v-if="levelList&&levelList.length>0">
				<view class="description-text flex" v-for="(item,index) in levelList" :key="index">
					<view class="icon"></view>
					<text class="description" >{{item.vip_name}}:
						队长返点{{item.captain_rebate}}%、
						门店返点{{item.store_rebate}}%、个人上级代理返点{{item.proxy_rebate}}%;</text>
				</view>

			</template>
		</view>
<!-- 		<view class="footer-box w100 flex-center" @click="toLog">
			<text class="text">核销记录</text>
		</view> -->
	</view>

</template>

<script setup>
	const writeCode = ref('');
	import {
		configInfoStore
	} from '@/stores/config.js';
	import { userInfoStore } from '@/stores/user';
	const configStore = configInfoStore();
	const userStore = userInfoStore();
	const levelList = computed(() => {
		if (userStore.level_info) {
			return userStore.level_info?.value;
		}
		return null;
	})
	const writeTips = ref(computed(() => configStore.configInfo?.write_off_notice?.value))
	const toscanCode = () => { //去扫描
		uni.scanCode({
			scanType: ['qrCode'],
			success: async (res) => {
				// console.log('条码类型：', res.scanType);
				// console.log('条码内容：', res.result);
				writeOff(res.result);
			},
			fail: (err) => {
				uni.$u.toast('识别失败');
			}
		})
	}
	const confirmWrite = async () => { //确认核销
		if (!writeCode.value) {
			uni.$u.toast('请填写核销码');
			return
		}
		writeOff(writeCode.value);
	}
	const writeOff = async (data) => {
		const res = await $Api.group.writeOff({
			verify_code: data
		}, true);
		if (res.code == 1) {
			setTimeout(() => {
				uni.hideLoading();
				uni.showToast({
					title: '核销成功！'
				})
			}, 600)
		} else {
			uni.$u.toast(res.msg)
		}
	}
	const toLog = () => {
		uni.navigateTo({
			url: '/page_user/views/writeOffLog'
		})
	}
</script>
<style>
	.u-input__content__prefix-icon {
		display: flex;
		align-items: center;
	}
</style>
<style lang="scss" scoped>
	.writeOff-box {
		flex-direction: column;
		padding-bottom: 24rpx;
		position: relative;
		.writeOff-log{
			width: 160rpx;
			background: $btn-bg-color;
			height: 38rpx;
			border-radius: 27rpx 0 0 27rpx;
			position: absolute;
			right: 0;
			top: 18rpx;
			
			.text {
				color: $btn-text-color;
				font-size: 24rpx;
			}
		}

		.writeOff_bg {
			width: 402rpx;
			height: 432rpx;
			margin-top: 96rpx;
		}

		.name {
			font-weight: bold;
			font-size: 38rpx;
			color: #C8C9C9;
			margin: 50rpx 0 18rpx 0;
		}
		.icon{
			width: 16rpx;
			height: 16rpx;
			background: #6DC5BC;
			border-radius: 50%;
			margin-right: 12rpx;
			flex-shrink: 0;
			margin-top: 10rpx;
		}
		.description-text{
			margin-top: 18rpx;
		}
		.description {
			font-weight: 500;
			font-size: 28rpx;
			color: #929495;
		}

		.scanCode-btn {
			margin: 42rpx 0;
			width: 624rpx;
			height: 96rpx;
			background: linear-gradient(270deg, #94DEAC 0%, #7CDEC7 47%, #79DED3 100%);
			box-shadow: 0rpx 8rpx 30rpx 0rpx rgba(108, 199, 190, 0.38);
			border-radius: 48rpx;

			.text {
				font-weight: bold;
				font-size: 30rpx;
				color: #0A534F;
				margin-left: 20rpx;
			}
		}

		.loseHand-btn {
			width: 624rpx;
			height: 96rpx;
			box-shadow: 0rpx 8rpx 30rpx 0rpx rgba(108, 199, 190, 0.38);
			border-radius: 48rpx;
			border: 2rpx solid rgba(121, 222, 211, 0.87);
			box-sizing: border-box;
			padding-left: 20rpx;

			.loseHand_icon {
				width: 44rpx;
				height: 44rpx;
			}

			.text {
				font-weight: bold;
				font-size: 30rpx;
				color: #6DC5BC;
				margin-left: 20rpx;
			}
		}
	}

	.footer-box {
		color: $name-color;
		font-weight: bold;
		font-size: 30rpx;
		margin-top: 48rpx;

		.text {
			text-decoration: underline;
		}
	}

	.description-box {
		flex-direction: column;
		padding: 36rpx;
		margin-top: 48rpx;
	}
</style>